<%-- 
    Document   : warning_table
    Created on : 2017-7-20, 14:10:24
    Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>预警表格</title>
        <link rel="stylesheet" type="text/css" href="extjs/build/classic/theme-crisp/resources/theme-crisp-all.css">
        <link rel="stylesheet" type="text/css" href="extjs/build/classic/theme-crisp/resources/theme-crisp-all-debug.css">

        <script type="text/javascript" charset="UTF-8" src="extjs/build/ext-bootstrap.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/ext-all.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/ext-all-debug.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/classic/locale/locale-zh_CN.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/classic/locale/locale-zh_CN-debug.js"></script>
        <script type="text/javascript">
            Ext.onReady(function () {
//                Ext.MessageBox.alert("提示", "这是一开始");
                Ext.tip.QuickTipManager.init();//初始化提示
                Ext.EventManager.onWindowResize(function (width, height) {
                    viewport.setHeight(height);
                    viewport.setWidth(width);
                    gridPanel.setHeight(height);
                    gridPanel.setWidth(width);

                });
                var updateId = "";
                var msgbox1 = Ext.Msg.show({
                    title: "加载数据进度",
                    msg: "",
                    closable: true,
                    width: 300,
                    modal: true,
                    progress: true
                });
                var count = 0;
                var curnum = 0;
                var msgtext = "";
                var task = {run: function () {
                        count++;


                        if (count === 10) {
                            Ext.TaskManager.stop(task);
                        }
                        curnum = count / 10;
//                        Ext.Msg.alert("提示信息", "加载数据出错!错误信息："+curnum);
                        msgtext = "当前加载:" + curnum * 100 + "%";
                        msgbox1.updateProgress(curnum, msgtext, false);
                    }, interval: 300};
                Ext.TaskManager.start(task);
                var dataStore = Ext.create('Ext.data.Store', {
                    storeId: 'simpsonsStore',
                    // fields一定要明确指定type，这样有很多好处，比如filter能直接设为true，便会默认按照store-fields设置好的type来确定filter的类型。

                    fields: [{
                            name: 'id',
                            type: 'string'
                        }, {
                            name: 'bug_id',
                            type: 'string'
                        }, {
                            name: 'content',
                            type: 'string'
                        }, {
                            name: 'bug_time_str',
                            type: 'string'
                        },
                        {
                            name: 'remark',
                            type: 'string'
                        }, {
                            name: 'status',
                            type: 'string'
                        }
                    ],
                    //排序，按ID排序，升序排序
                    sorters: [{property: "id", direction: "ASC"}],
                    //样例数据
//                    data: [
//                        {id: "1", bug_id: "1", content: '2', bug_time: "21", bug_time_str: '1', remark: "1", status: "1"}
//                    ],
                    // 数据代理服务
                    autoSync: true,
                    autoLoad: {start: 0, limit: 25},
                    proxy: {
                        type: 'ajax', // 使用ajax请求
                        url: 'getTableList.htm', // 请求后台读取数据的地址
                        // 读取数据的工具（数据代理）
                        reader: {
                            // 读取方式按照json字符串格式读取
                            type: 'json',
                            // json解析成js对象之后读取所有数据（通常是数组）的属性名称。
                            root: 'root',
                            // json解析成js对象之后读取数据总条数的属性名称
                            totalProperty: 'totalProperty'
                        }
                    },
                    // 每页显示多少条
                    pageSize: 25
                });
                dataStore.load(
                        {
                            params: {username: getname()},
                            scope: dataStore,
                        }
                );
                //自定义参数
                dataStore.on('beforeload', function (store, options) {
                    Ext.apply(dataStore.proxy.extraParams, {username: getname()});
                });
                //加载数据的监听事件
                dataStore.on('load', function (store, records, options) {
                    Ext.TaskManager.stop(task);
                    msgbox1.hide();
                    if (records[0].get("id") === "-1") {
//                        Ext.Msg.alert("提示信息", "加载数据出错!错误信息：" + records[0].get("content"));
                        dataStore.removeAll();
                    }
                });
                var gridPanel = Ext.create('Ext.grid.Panel', {
                    title: '预警信息',
                    store: Ext.data.StoreManager.lookup('simpsonsStore'),
                    columnLines: true, //加上表格线
                    forceFit: true, //宽度自适应
                    clicksToEdit: 2,
                    selModel: {selType: 'checkboxmodel'}, //选择框
                    viewConfig: {
                        stripeRows: true, //在表格中显示斑马线
                        enableTextSelection: true //可以复制单元格文字
                    },
                    listeners: [{'itemdblclick': function (view, record, item, index, e, eOpts, n) {
//                            var colname = gridPanel.getColumnModel().getDataIndex(); //获取列名
                                Ext.MessageBox.confirm("系统提示", "是否编辑备注内容？", function (but) {
                                    //弹框编辑
                                    updateId = record.get("id");
                                    if (but === "yes") {
                                        updatewindow.show();
                                    }

                                });
                            }
                        },
                        {'itemmouseenter': function (view, record, item, index, e, eOpts) {
                                if (view.tip == null) {  //这块判断很重要，不能每次都创建个tooltip，要不显示会有问题。
                                    view.tip = Ext.create('Ext.tip.ToolTip', {
                                        target: view.el,
                                        delegate: view.itemSelector,
                                        renderTo: Ext.getBody()

                                    });
                                }
                                ;
                                var gridColums = view.getGridColumns();
                                var column = gridColums[e.getTarget(view.cellSelector).cellIndex];
                                view.el.clean();
                                view.tip.update(record.data[column.dataIndex]);
                            }}],
                    header: {
                        items: [
                            {
                                xtype: 'button',
                                buttonAlign: 'center',
                                text: '测试预警铃声',
                                margin: '0 40 0 20',
                                handler: function () {

                                    window.location.href = "testPlay.htm";
                                }
                            },
                        ]
                    },
                    columns: [
                        {text: '自增ID', dataIndex: 'id'},
                        {text: '预警ID', dataIndex: 'bug_id', flex: 1},
                        {text: '预警内容', dataIndex: 'content', flex: 1},
                        {text: '发生时间', dataIndex: 'bug_time_str', width: 150},
                        {text: '备注', dataIndex: 'remark'},
                        {text: '修复状态', dataIndex: 'status'},
                        {
                            xtype: 'actioncolumn',
                            text: '操作',
                            width: 200,
                            items: [
                                {text: " "},
                                //修复bug-完成
                                {
                                    icon: 'images/network.png',
                                    tooltip: '是否修复',
                                    handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {
                                        // do something...  

                                        Ext.MessageBox.confirm('提示', '确定已处置？', function (button, text) {
                                            if (button === 'yes') {
                                                Ext.Ajax.request({
                                                    url: "updateTableList.htm",
                                                    params: {id: record.get("id"), bug_id: record.get("bug_id")},
                                                    headers: {
                                                        'userHeader': 'userMsg'
                                                    },
                                                    method: 'POST',
                                                    success: function (response, options) {

                                                        if (response.responseText === record.get("id"))
                                                        {
                                                            Ext.MessageBox.alert('成功', '已修复: ' + response.responseText);
                                                            dataStore.reload();
//                                                        document.location = "process_processFrame.htm";//重新加载
                                                        } else {
                                                            Ext.MessageBox.alert('失败', '从服务端获取结果: ' + response.responseText);
                                                        }
                                                    },
                                                    failure: function (response, options) {
                                                        Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
                                                    }
                                                });
                                            }
                                        });

                                    }
                                },
                            ]
                        }
                    ],
                    dockedItems: [{
                            xtype: 'pagingtoolbar',
                            store: Ext.data.StoreManager.lookup('simpsonsStore'), // same store GridPanel is using  
                            dock: 'bottom',
                            pageSize: 25,
//                            plugins : [ new Ext.ux.plugins.PageComboResizer() ],
                            displayInfo: true,
                            emptyMsg: "没有数据",
                            items: [
                                {
                                    xtype: 'button',
                                    text: '批量删除',
                                    handler: function () {
                                        var records = gridPanel.getSelectionModel().getSelection();
//                                        gridPanel.getStore().currentPage=200;
                                        if (records.length === 0) {
                                            Ext.Msg.alert("提示", "未选中任何项目");
                                        } else {
                                            var processArrayStr = "";
                                            var userId = "";
                                            for (var i = 0; i < records.length; i++) {
                                                processArrayStr += records[i].get("id") + ";";
                                            }
                                            //发到后台处理
                                            Ext.Ajax.request({
                                                url: "batchDelete.htm",
                                                params: {idArray: processArrayStr},
                                                headers: {
                                                    'userHeader': 'userMsg'
                                                },
                                                method: 'POST',
                                                success: function (response, options) {

                                                    if (response.responseText === "success")
                                                    {
                                                        Ext.MessageBox.alert('提示', '成功删除');
                                                        dataStore.reload();//重新加载
                                                    } else {
                                                        Ext.MessageBox.alert('失败', '删除失败: ' + response.responseText);
                                                    }
                                                },
                                                failure: function (response, options) {
                                                    Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
                                                }
                                            });
                                        }
                                    }
                                },
                            ]
                        },
                    ],
                });
                var updatewindow = Ext.create('Ext.window.Window', {
                    id: "updatewindow",
                    closeAction: "hidden",
                    title: "修改备注",
                    width: 350,
//                    height: 200,
                    autoScroll: true,
                    bodyPadding: 20,
                    //                    bodyPadding: 10,
                    bodyStyle: 'overflow-x:hidden; overflow-y:scroll',
                    items: [
                        {
                            xtype: 'textfield',
                            name: 'remark',
                            id: "remark",
                            fieldLabel: '备注内容：',
                            emptyText: '请输入备注内容',
                            allowBlank: false
                        },
                    ],
                    buttonAlign: 'center',
                    buttons: [{
                            style: 'margin-bottom:20px;',
                            width: 100,
                            text: '确定修改',
                            handler: function () {
                                if (Ext.getCmp("remark").getValue() !== "") {
                                    Ext.Ajax.request({
                                        url: "updateRemark.htm",
                                        params: {id: updateId, remark: Ext.getCmp("remark").getValue()
                                        },
                                        headers: {
                                            'userHeader': 'userMsg'
                                        },
                                        method: 'POST',
                                        success: function (response, options) {
                                            updatewindow.hide();
                                            Ext.MessageBox.alert('提示', "修改成功！");
                                            dataStore.reload();
                                        },
                                        failure: function (response, options) {
                                            updatewindow.hide();
                                            Ext.MessageBox.alert('失败', '请求超时或网络故障,错误编号：' + response.status);
                                        }
                                    });
                                } else {
                                    Ext.MessageBox.alert('提示', '请输入备注内容');
                                }



                            },
                            id: "comitButton"
                        }
                        ,
                        {
                            text: '取消修改',
                            width: 100,
                            style: 'margin-bottom:20px;',
                            handler: function () {
                                updatewindow.hide();
                            },
                            id: "refuseButton"
                        }
                    ]
                });
                var viewport = Ext.create('Ext.container.Viewport', {
                    layout: 'border',
                    items: [
                        {
                            region: 'center',
                            xtype: 'panel', // TabPanel itself has no title
                            activeTab: 0, // First tab active by default
                            items: [
                                gridPanel
                            ]
                        }]
                });
            });
            function getname() {
                return "admin";
            }
        </script>
    </head>
    <body>
    </body>
</html>
